<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .cor {
            background-color: red;
        }
        #box {
            width: 100%;
            border: 2px solid black;
            margin: 0 auto;
            height: 500px;
            background-color: greenyellow;
        }

        td {
            text-align: center;
            font-family: 楷体;
            font-size: x-large;
        }


    </style>
</head>
<body>
<div id="box">
    <h1 style="text-align:center;color: aqua;">人品计算器</h1>

    <div id="dv">
        <table id="tab1" cellspacing="20" cellpadding="0">

        </table>
    </div>
    <div class="center">
        <center><input type="button" value="开始" id="btn">
            <input type="button" value="结束" id="btn2"></center>
    </div>
</div>
</body>


<script>
    function myVoid(id){
        return document.getElementById(id);
    }

    //定义数组，存放数值
    var arr = ["王将",
        "卢旭波",
        "陈  涛",
        "王智欣",
        "焦  迪",
        "王  豪",
		"马  昭",
		"李  轲",
		"田  亥",
        "党  晨",
        "郭  希",
		"姚若梓",
        "刘  南"];

    //先创建一个tr加入到名字为dv的tab1中
    var tr = document.createElement("tr");
    myVoid("tab1").appendChild(tr);

    //接下来遍历arr数组，动态创建td元素并且加入到tr中，并且把数组变量动态写到td中
    for(var i=0;i<arr.length;i++){
        td = document.createElement("td");
        tr.appendChild(td);
        td.innerHTML = arr[i];
    }

    //先获取到所有的tds，为下面的应用css样式做铺垫
    var tds = tr.getElementsByTagName("td");

    var timer;//这里先定义一个变量，开启定时器再赋值，
    //为鼠标注册点击事件
    myVoid("btn").onclick=function (){
        clearInterval(timer);//在开启定时器之前先清除定时器，避免出现用户多次点击开启多个定时器而关不掉。
        //开启定时器并赋值给变量
        timer = setInterval(function (){
            var num = parseInt(Math.random()*arr.length);
            //这里遍历所有的td元素，在开启定时器之前先把所有的td的样式清除掉
            //如果这里不清除，那么所有的li在下一步都会全部应用上css样式，
            //全部都会高亮显示,无法实现排他效果
            for(var i=0;i<tds.length;i++){
                tds[i].className = "";
            }
            tds[num].className = "cor";
        },100);
    }
    //停止点名按钮。
    myVoid("btn2").onclick=function (){
        clearInterval(timer);
    }

</script>
</html>
